<template>
  <div
    ref="containerTarget"
    class="group w-full relative p-0.5 rounded-xl border-white duration-500 hover:bg-red-100/40"
  >
    <div>
      <!-- 搜索图标 -->
      <m-svg-icon
        class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] left-2"
        name="search"
        color="#707070"
      />
      <!-- 输入框 -->
      <input
        class="block w-full h-[44px] pl-4 outline-0 bg-zinc-100 dark:bg-zinc-800 caret-zinc-400 rounded-xl text-zinc-900 dark:text-zinc-200 tracking-wide text-sm font-semibold border border-zinc-100 dark:border-zinc-700 duration-500 focus:border-red-300 group-hover:bg-white dark:group-hover:bg-zinc-900 group-hover:border-zinc-200 dark:group-hover:border-zinc-700"
        type="text"
        placeholder="搜索"
        v-model="inputValue"
        @keydown.enter="onSearchHandler"
        @focus="onFocusHandler"
        @blur="onBlurHandler"
      />
      <!-- 删除按钮 -->
      <m-svg-icon
        v-if="inputValue"
        name="input-delete"
        color="#707070"
        class="h-1.5 w-1.5 absolute translate-y-[-50%] top-[50%] right-9 cursor-pointer duration-500"
        @click="onClearClick"
      />
      <!-- 分割线 -->
      <div class="opacity-0 h-1.5 w-[1px] absolute translate-y-[-50%] top-[50%] right-[62px] duration-500 bg-zinc-200 group-hover:opacity-100"></div>
      <!-- TODO：搜索按钮（通用组件） -->
      <m-button
        class="opacity-0 absolute translate-y-[-50%] top-[50%] right-1 rounded-full duration-500 group-hover:opacity-100"
        icon="search"
        iconColor="#FFFFFF"
        @click="onSearchHandler"
      />
      <!-- 下拉区 -->
      <transition name="slide">
        <div
          v-show="isFocus"
          class="max-h-[368px] w-full text-base overflow-auto bg-white dark:bg-zinc-800 absolute z-20 left-0 top-[56px] p-2 rounded border border-zinc-200 dark:border-zinc-600 duration-200 hover:shadow-2xl scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent">
          <slot name="dropdown" />
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  // 双向绑定
  const EMIT_UPDATE_MODELVALUE = 'update:modelValue'
  // search 搜索
  const EMIT_SEARCH = 'search'
  // 删除所有文本
  const EMIT_CLEAR = 'clear'
  // 输入事件
  const EMIT_INPUT = 'input'
  // 获取焦点事件
  const EMIT_FOCUS = 'focus'
  // 失去焦点事件
  const EMIT_BLUR = 'blur'
</script>

<script setup>
/**
 * 1、输入内容实现双向数据绑定
 * 2、搜索按钮在 hover 时展示
 * 3、一键清空文本功能
 * 4、触发搜索
 * 5、控制下拉展示区的展示
 * 6、事件处理
*/
import { watch, ref } from 'vue'
import { useVModel, onClickOutside } from '@vueuse/core'
const props = defineProps({
  modelValue: {
    required: true,
    type: String
  }
})

const inputValue = useVModel(props)

/**
 * 监听用户输入行为
*/
watch(inputValue, (val) => {
  emits(EMIT_INPUT, val)
})

const emits = defineEmits([
  EMIT_UPDATE_MODELVALUE,
  EMIT_SEARCH,
  EMIT_CLEAR,
  EMIT_INPUT,
  EMIT_FOCUS,
  EMIT_BLUR
])

/**
 * 清空文本
*/
const onClearClick = () => {
  inputValue.value = ''
  emits(EMIT_CLEAR)
}

/**
 * 点击搜索
*/
const onSearchHandler = () => {
  emits(EMIT_SEARCH, inputValue.value)
}

// input 是否获取到焦点
const isFocus = ref(false)
const containerTarget = ref(null)
/**
 *  获取到焦点
*/
const onFocusHandler = () => {
  isFocus.value = true
  emits(EMIT_FOCUS)
}
/**
 * 失去焦点
*/
const onBlurHandler = () => {
  emits(EMIT_BLUR)
}
/**
 * 监听元素外部的点击事件
*/
onClickOutside(containerTarget, () => {
  isFocus.value = false
})
</script>

<style lang="scss" scoped>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
}
</style>
